<style>
    .page {
		background-image: url('~@/static/images/user/bg_icon.png');
		background-repeat: repeat-y;
		background-size: contain;
    }

    image {
        diplay: block;
		width: 100%;
		height: 100%;
    }

    .g-tab-btns {
        display: flex;
        justify-content: space-around;
        margin-top: 80upx;
        position: relative;
		margin-bottom: 70upx;
    }
	.g-tab-btns view{
		width: 273upx;
		height: 85upx;
		border-radius: 50px;
		overflow: hidden;
		background: #ee9a2e;
		box-shadow: 0 6upx 0px #ee9a2e;
		transition: all .3s;
	}
    .g-tab-btns view.z-act {
        background: #fd5948;
		box-shadow: 0 6upx 0px #cc2e1e;
    }
    .g-content-wrap {
		width: 575upx;
		height: 186upx;
		position: relative;
		z-index: 0;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding-left: 90upx;
		margin-bottom: 30upx;
    }
	.g-content-wrap .u-bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
    .u-text {
        width: 550upx;
		font-weight: bold;
		line-height: 40upx;
		color: #ee6f29;
		font-size: 28upx;
		display: block;
    }
	.good-text{
		color: #ffe083;
	}
	.g-content-rule{
		width: 665upx;
		height: 583upx;
		position: relative;
		z-index: 0;
		margin: 80upx auto;
		padding-top: 80upx;
	}
	.g-content-rule .u-bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
    .u-rule-title {
        color: #830b0d;
        font-size: 34upx;
		font-weight: bold;
		margin: 0 auto;
		width: 140upx;
		line-height: 62upx;
		border:1px solid #800a0c;
		border-radius: 50px;
		padding: 0 20upx;
		display: block;
		text-align: center;
		margin-bottom: 30upx;
    }

    .u-rule-text {
        width: 550upx;
		margin: 0 auto;
		color: #800a0c;
		font-size: 26upx;
		line-height: 36upx;
    }
</style>

<template>
    <view class="page">
        <image style="width: 100%" src="../../static/images/user/banner_head.jpg" mode="widthFix"></image>
        <view class="g-tab-btns">
            <view :class="[nIndex==3 ? 'z-act' : '']"><image src="../../static/images/user/tab_ba.png" mode="widthFix" @tap="toggle('3')"></image></view>
            <view :class="[nIndex==0 ? 'z-act' : '']"><image src="../../static/images/user/tab_free.png" mode="widthFix" @tap="toggle('0')"></image></view>
        </view>
        <!-- 模式 -->
        <view class="g-content-wrap">
            <image class="u-bg" src="../../static/images/user/mode.png" mode="widthFix"></image>
            <text class="u-text">{{aContent[nIndex].pattern}}</text>
        </view>
        <!-- 优势 -->
        <view class="g-content-wrap">
            <image class="u-bg" src="../../static/images/user/adv.png" mode="widthFix"></image>
            <view class="u-text good-text">
                <view v-for="(item,index) in aContent[nIndex].good" :key="index">{{item}}</view>
            </view>
        </view>
        <!-- 活动规则 -->
        <view class="g-content-rule">
            <image class="u-bg" src="../../static/images/user/rule_bg.png" mode="widthFix"></image>
            <text class="u-rule-title">活动规则</text>
            <view class="u-rule-text u-text">
                <view v-for="(item,index) in aContent[nIndex].rule" :key="index">{{item}}</view>
            </view>
        </view>
    </view>
</template>

<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                aContent: [{
                        pattern: "合拼团购心仪商品，每件商品20份为一期，满20份结算一次，份份都将公布折扣，其中一份还低至免费！",
                        good: [
                            "1、消费者折扣购正品，甚至免费购物；",
                            "2、商家多元推广渠道快速销货。",

                        ],
                        rule: [
                            "①选择份数，支付活动订金抢免费，每期可买多份；",
                            "②每期满20份公布，份份有折，其中一份更低至免费；",
                            "③选择商品份数，享受免费购物；",
                            "④针对免费一份，用户也可委托公司代售，公司两折回收；",
                            "⑤公布后不选取商品部分，活动订金立即全额退回账户，可互转及退取；",
                            "⑥如10天内商品未满份数，本期活动作废，活动订金次日全额退回账户。",

                        ],
                        video: "http://ydt2.xunyu999.com/Public/video/ydt2_free.mp4"

                    }, {
                        pattern: "购物时，邀请好友砍价，砍价的好友越多，商品的优惠力度越大；而每一个好友，都可以从帮忙砍价中，获得红包福利。",
                        good: [
                            "1、 消费者自身优惠购物；",
                            "2、 好友帮忙拼购即可获得红包福利， 多帮多得；",
                            "3、 商家多元推广渠道， 快速销货；",
                            "4、 代理商圈建立， 持续获利。",

                        ],
                        rule: [
                            "1、 选取心仪的商品；",
                            "2、 支付商品价格的30 % 作为订金， 即可发给好友砍价；",
                            "3、 再订单时间内， 越多好友砍价越多优惠， 可以看到商品的价格逐步下降；",
                            "4、 对于每一个订单， 每一个好友砍价都可以获得福利红包， 只要订单成功， 这些福利均可用于参购或退取；",
                            "5、 砍价时间到后， 根据实际优惠价格结算；",
                            "6、 价格高于订金， 在订单完成后1天均可补差价发货； 如低于订金差额全退；",
                            "7、 如订单途中或结束后， 取消拿货订金全额退回， 同时好友抢到红包即作废。",

                        ],
                        video: "http://ydt2.xunyu999.com/Public/video/demi.mp4"

                    },

                    {
                        pattern: "钻石黄金全新珠宝，三年内随时退换，免费珠宝佩戴新风尚。",
                        good: [
                            "1、 珠宝款式多， 预付价格实惠",
                            "2、 均为全新， 无陈旧困扰",
                            "3、 随换随退， 称心如意",

                        ],
                        rule: [
                            "1、 选取心仪的商品；",
                            "2、 预付享宝金， 享用珠宝",
                            "3、 三年内如想退换， 向平台发起， 检查珠宝耗损后， 结算差价换款式或退换",

                        ],
                        video: 0

                    },
                    {
                        pattern: "合拼团购心仪商品，每件商品20份为一期，满20份结算一次，份份都将公布折扣，其中一份还低至八折！",
                        good: [
                            "1、消费者折扣购正品；",
                            "2、商家多元推广渠道快速销货。"

                        ],
                        rule: [
                            "①选择份数，支付活动订金抢免费，每期可买多份；",
                            "②每期满20份公布，份份有折，其中一份更低至八折；",
                            "③选择商品份数，享受折扣购物；",
                            "④针对八折一份，用户也可委托公司代售，公司两折回收；",
                            "⑤公布后不选取商品部分，活动订金立即全额退回账户，可互转及退取；",
                            "⑥如10天内商品未满份数，本期活动作废，活动订金次日全额退回账户",
                        ]
                    }
                ],
                nIndex: 3,
            };
        },
        methods: {
            toggle(index) {
                this.nIndex = index;
            }
        }
    }
</script>
